{% extends 'base_auth.html' %}
{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/register.css' %}">
<style>
    .invalid-feedback {
        color: red;
    }
</style>
{% endblock %}



{% block content %}
<div class="card shadow-lg">
    <div class="card-body">
        <h5 class="card-title text-center py-3">YouYu 用户注册</h5>
        <form action="{% url 'register' %}" method="post">
            {% csrf_token %}
            <div class="form-group inputZone">
                {% with error=form_obj.username.errors.0 %}
                <img src="{% static 'img/account.svg' %}"/>
                <input type="text" class="form-control {% if error %} is-invalid {% endif %}" value="{{ values.username }}"
                    name="username" id="username" placeholder="用户名" />
                <span class="invalid-feedback">{{ error }}</span>

                {% endwith %}
            </div>
            <div class="form-group inputZone">
                {% with error=form_obj.email.errors.0 %}
                <img src="{% static 'img/email.svg' %}">
                <input type="email" class="form-control {% if error.0 %}is-invalid{%endif%}" name="email"
                    value="{{ values.email }}" placeholder="请输入您的邮箱" id="email" autocomplete="off"/>
                <span class="invalid-feedback">{{ error }}</span>
                {% endwith %}
            </div>
            <div class="form-group inputZone">
                {% with error=form_obj.password.errors.0 %}
                <img src="{% static 'img/lock.svg' %}">
                <input type="password" class="form-control {% if error.0 %}is-invalid{%endif%}" name="password"
                    placeholder="密码"/>
                <span class="invalid-feedback">{{ error }}</span>
                {% endwith %}
            </div>
            <div class="form-group inputZone">
                {% with error=form_obj.re_password.errors.0 %}
                <img src="{% static 'img/lock.svg' %}">
                <input type="password" class="form-control {% if error.0 %}is-invalid{%endif%}" name="re_password"
                    placeholder="确认密码" />
                <span class="invalid-feedback">{{ error }}</span>
                {% endwith %}
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-primary">注册</button>
            </div>
            <p id="privacy">注册即表示您同意并愿意遵守 <a href="">用户协议</a> 与 <a href="">隐私政策</a></p>
            <p id="gotologin">已有账户, <a href="{% url 'login' %}">立即登录</a></p>
        </form>
    </div>
</div>


{% endblock %}


{% block js %}
<script src="{% static 'js/register.js' %}"></script>
{% endblock %}